/**
 * 牙位图
 * @param {*} option 
 */
function scToothMap() {
	var present = null;
	var dropdown = null;

	/**
	 * 创建视图
	 */
	this.createView = function (option) {
		var element = null;
		var selector = option.selector;

		if (typeof (selector) === "string") {
			element = window.document.querySelector(selector);
			this.selector = selector;
		} else {
			element = selector;
			var getSelector = function () {
				return 'xxxxxxxx'.replace(/[xy]/g, function (c) {
					var r = Math.random() * 16 | 0,
						v = c == 'x' ? r : (r & 0x3 | 0x8);
					return v.toString(16);
				});
			}
			this.selector = getSelector();
			element.setAttribute("inner-id", this.selector);
			this.selector = "[inner-id='" + this.selector + "']";
		}

		this.element = element;

		// ******* 牙位展示对象 ******/
		function toothMapPresent(element) {
			this.element = element;

			this.cache = {};

			// 绘制牙位图
			this.renderUI = function (map) {
				var topLeft = element.querySelector(".toothMapTableTopLeft"),
					topRight = element.querySelector(".toothMapTableTopRight"),
					bottomLeft = element.querySelector(".toothMapTableBottomLeft"),
					bottomRight = element.querySelector(".toothMapTableBottomRight");

				var eleMap = {
					"topLeft": topLeft,
					"topRight": topRight,
					"bottomLeft": bottomLeft,
					"bottomRight": bottomRight
				}

				var compose = function (tooth, toothPos) {
					var htm = "<div class='oneTooth'>";

					if (tooth) {
						htm += "<span class='tooth'>" + tooth + "</span>";
					}

					if (toothPos && toothPos.length > 0) {
						htm += "<span class='toothPos'>" + toothPos.join(",") + "</span>";
					}

					htm += "</div>";

					return htm;
				}

				for (var i in eleMap) {
					var pos = map[i],
						htm = "";

					if (pos) {
						for (var j in pos) {
							var m = pos[j];
							htm += compose(m.tooth, m.toothPos);
						}
					}

					eleMap[i].innerHTML = htm;
				}
			}

			// 对牙位进行排序
			this.sort = function (map) {
				var sortM = {};
				for (var i in map) {
					sortM[i] = [];
					var tooths = map[i];
					for (var j in tooths) {
						sortM[i].push(j);
					}
				}

				var sortMap = {};

				for (var i in sortM) {
					sortM[i].sort();
					sortMap[i] = [];

					var arr = sortM[i];

					if (i == "topRight" || i == "bottomRight") {
						for (var j = 0; j < arr.length; j++) {
							sortMap[i].push({ tooth: arr[j], toothPos: map[i][arr[j]] });
						}
					} else {
						for (var j = arr.length - 1; j >= 0; j--) {
							sortMap[i].push({ tooth: arr[j], toothPos: map[i][arr[j]] });
						}
					}
				}

				return sortMap;
			}

			// 设置单个牙位数据
			this.setItem = function (item, notRenderUI) {
				var tooth = item.tooth,
					toothPos = item.toothPos,
					pos = item.pos,
					toothChecked = item.toothChecked,
					toothPosChecked = item.toothPosChecked;

				var cache = this.cache;

				if (!cache[pos]) {
					cache[pos] = {};
				}

				if (!cache[pos][tooth]) {
					cache[pos][tooth] = [];
				}

				var arr = cache[pos][tooth];

				if (toothChecked) {
					if (toothPosChecked) {
						arr.push(toothPos);
					} else {
						arr.splice(arr.indexOf(toothPos), 1);
					}
				} else {
					delete cache[pos][tooth];
				}

				if (!notRenderUI) {
					var map = this.sort(cache);
					this.renderUI(map);
				}
			}

			//从缓存结构数据加载
			this.loadFromCache = function (cache) {
				this.cache = cache;
				var map = this.sort(cache);
				this.renderUI(map);
			}

			// 加载多个牙位数据
			this.loadData = function (data) {
				this.clear();

				for (var i = 0; i < data.length; i++) {
					this.setItem(data[i], true);
				}

				var map = this.sort(this.cache);
				this.renderUI(map);
			}

			// 清空所有数据
			this.clear = function () {
				this.cache = {};
				this.renderUI({
					"topLeft": "",
					"topRight": "",
					"bottomLeft": "",
					"bottomRight": ""
				});
			}
		}

		// ******** 牙位选择弹框对象 ******/
		function toothMapDropDown(element) {
			this.element = element;

			this.show = function () {
				element.classList.add("active");
				if (this.afterShow) {
					this.afterShow();
				}
			}

			this.close = function () {
				element.classList.remove("active");
			}

			this.resize = function (width) {
				element.style.width = width + "px";
			}

			// 是否有选择牙齿处理位置
			var hasPosButton = function () {
				return element.querySelectorAll(".toothMapPosBody .toothMapButton[data-checked='1']").length;
			}

			// 回调处理所有按钮
			var processButtons = function (action) {
				element.querySelectorAll(".toothMapButton.fix").forEach(function (target) {
					if (action) {
						action(target);
					}
				});
			}

			// 设置是否选中按钮
			var checkButton = function (target, checked, inactive) {
				if (checked) {
					target.setAttribute("data-checked", "1");
					target.classList.add("checked");
					if (!inactive) {
						target.classList.add("active");
					} else {
						target.classList.remove("active");
					}
				} else {
					target.removeAttribute("data-checked");
					target.classList.remove("checked");
					target.classList.remove("active");
				}
			}

			// 是否禁用牙齿处理位置按钮
			var disableButton = function (target, disabled) {
				if (disabled) {
					target.setAttribute("disabled", "disabled");
				} else {
					target.removeAttribute("disabled");
				}
			}

			// 是按钮失活
			var inactiveButtons = function () {
				element.querySelectorAll(".toothMapLeft .toothMapButton.fix").forEach(function (target) {
					target.classList.remove("active");
				});
			}

			// 设置牙齿按钮有选择处理位置的效果
			var childButton = function (target, hasChild) {
				if (hasChild) {
					target.classList.add("child");
				} else {
					target.classList.remove("child");
				}
			}

			// 创建牙位数据
			var createData = function (target) {
				var isToothPos = target.getAttribute("data-tooth-pos");
				var data = {
					pos: target.getAttribute("data-pos"),
					tooth: target.getAttribute("data-val"),
					toothPos: target.getAttribute("data-tooth-pos"),
					toothChecked: true,
					toothPosChecked: isToothPos && target.getAttribute("data-checked") == "1"
				}
				return data;
			}

			//呈现下拉框界面状态
			this.renderUI = function (data) {
				for (var i in data) {
					var tooths = data[i];
					this.element.querySelectorAll(".toothMapButton[data-pos='" + i + "']").forEach(function (target) {
						var val = target.getAttribute("data-val"),
							toothPos = tooths[val];
						if (toothPos) {
							checkButton(target, true, true);
							if (Array.isArray(toothPos)) {
								childButton(target, toothPos.length > 0);
							}
						} else {
							checkButton(target, false);
							childButton(target, false);
						}
					});
				}
			}

			this.setToothPosHead = function (current) {
				var posHead = element.querySelector(".toothMapPosHead"),
					htm = "暂未选择牙位";

				if (current && current.toothChecked) {
					var pos = current.pos,
						tooth = current.tooth;

					htm = '<div class="toothMapMini">' +
						'<div class="toothMapMiniTopLeft">' + (pos == "topLeft" ? tooth : "&nbsp;") + '</div>' +
						'<div class="toothMapMiniTopRight">' + (pos == "topRight" ? tooth : "&nbsp;") + '</div>' +
						'<div class="toothMapMiniBottomLeft">' + (pos == "bottomLeft" ? tooth : "&nbsp;") + '</div>' +
						'<div class="toothMapMiniBottomRight">' + (pos == "bottomRight" ? tooth : "&nbsp;") + '</div>' +
						'</div>';
				}

				posHead.innerHTML = htm;
			}

			var ref = this;

			// 关闭按钮
			var cBtn = element.querySelector(".toothMapDropDownClose");
			if (cBtn) {
				cBtn.addEventListener("click", function (e) {
					ref.close();
					e.stopPropagation();
				});
			}

			// 快捷选择按钮
			var dBtns = element.querySelectorAll(".toothMapDropDownButtons>.toothMapButton");
			for (var i = 0; i < dBtns.length; i++) {
				var dbtn = dBtns[i];
				dbtn.addEventListener("click", function (e) {
					var action = this.getAttribute("data-action"),
						data = null;

					if (action == "reset") {
						processButtons(function (target) {
							checkButton(target, false);
							if (target.getAttribute("data-tooth-pos")) {
								disableButton(target, true);
							}
						});
					} else {
						var type = null;

						if (action == "h-full") {
							type = ["h-up", "h-down"];
						} else if (action == "r-full") {
							type = ["r-up", "r-down"];
						} else {
							type = [action];
						}

						data = [];

						processButtons(function (target) {
							var t = target.getAttribute("data-type");

							if (type.indexOf(t) < 0) {
								checkButton(target, false);
								if (target.getAttribute("data-tooth-pos")) {
									disableButton(target, true);
								}
							} else {
								checkButton(target, true);
								data.push(createData(target));
							}

							target.classList.remove("child");
						});
					}

					inactiveButtons();
					ref.setToothPosHead();

					if (ref.afterShortButtonClick) {
						ref.afterShortButtonClick(action, data);
					}
				});
			}

			// 牙位按钮
			var btns = element.querySelectorAll(".toothMapButton.fix");

			for (var i = 0; i < btns.length; i++) {
				var btn = btns[i];
				btn.addEventListener("click", function () {
					// 是牙位按钮
					var isToothPos = this.getAttribute("data-tooth-pos"),
						isChecked = this.getAttribute("data-checked");

					if (!isToothPos) {
						inactiveButtons();
					}

					if (!isChecked) {
						checkButton(this, true);

						// 是牙齿按钮
						if (!isToothPos) {
							ref.current = {
								pos: this.getAttribute("data-pos"),
								tooth: this.getAttribute("data-val"),
								toothChecked: true,
								toothPosChecked: false
							};
							ref.element.querySelectorAll("[data-tooth-pos]").forEach(function (target) {
								checkButton(target, false);
								disableButton(target, false);
							});
						}
						// 是牙位按钮
						else {
							ref.current.toothPos = this.getAttribute("data-tooth-pos");
							ref.current.toothChecked = true;
							ref.current.toothPosChecked = true;
						}
					} else {
						checkButton(this, false);

						// 是牙齿按钮
						if (!isToothPos) {
							ref.current = {
								pos: this.getAttribute("data-pos"),
								tooth: this.getAttribute("data-val"),
								toothChecked: false,
								toothPosChecked: false
							};
							ref.element.querySelectorAll("[data-tooth-pos]").forEach(function (target) {
								checkButton(target, false);
								disableButton(target, true);
							});
						} else {
							ref.current.toothPos = this.getAttribute("data-tooth-pos");
							ref.current.toothChecked = true;
							ref.current.toothPosChecked = false;
						}
					}

					ref.setToothPosHead(ref.current);

					var currentToothButton = ref.element.querySelector(".toothMapLeft .toothMapButton.fix.checked.active");

					if (currentToothButton) {
						childButton(currentToothButton, hasPosButton());
					}

					if (ref.afterFixButtonClick) {
						ref.afterFixButtonClick(ref.current);
					}
				});

				if (btn.getAttribute("data-tooth-pos")) {
					if (!option || !option.current || !option.current.toothChecked) {
						btn.setAttribute("disabled", "disabled");
					}
				}
			}

			// 同步牙位
			this.element.querySelector("input[name='syncData']").addEventListener("click", function () {
				if (!this.checked) return;

				if (ref.syncData) {
					ref.syncData();
				}
			});
		}

		// 对象通信
		present = new toothMapPresent(element.querySelector(".toothMapPresent"));
		dropdown = new toothMapDropDown(element.querySelector(".toothMapDropDown"));

		var myself = this;

		var isSyncData = function () {
			return element.querySelector("input[name='syncData']").checked;
		}

		var syncData = function () {
			if (window.toothMapManager && isSyncData()) {
				window.toothMapManager.syncData.call(this);
			}
		}

		// 快捷按钮点击后回调
		dropdown.afterShortButtonClick = function (action, data) {
			if (action == "reset") {
				present.clear();
			} else {
				present.loadData(data);
			}

			syncData.call(myself);
		}

		// 牙位按钮点击后回调
		dropdown.afterFixButtonClick = function (item) {
			present.setItem(item);

			syncData.call(myself);
		}

		// 下拉框弹出后回调
		dropdown.afterShow = function () {
			if (window.toothMapManager) {
				window.toothMapManager.closeDropDown.call(myself);
			}
		}

		// 同步牙位选择后回调
		dropdown.syncData = function () {
			syncData.call(myself);
		}

		// 事件定义
		var bindEvent = function () {
			element.querySelector(".toothMapPresent").addEventListener("click", function () {
				if(!dropdown.__show){
				    dropdown.__show = true;
				 	dropdown.show();
				}else{
					dropdown.__show = false;
					dropdown.close();
				}
			});
		}

		bindEvent.call(this);

		return element;
	}

	/**
	 * 将牙位图转成图片
	 */
	this.toImage = function(){
        
	}

	//克隆对象
	var clone = function (obj) {
		if (null == obj || "object" != typeof obj) return obj;

		if (Array.isArray(obj)) {
			var copy = [];
			for (var i = 0; i < obj.length; i++) {
				copy[i] = clone(obj[i]);
			}
			return copy;
		}

		if (typeof (obj) === "object") {
			var copy = {};
			for (var attr in obj) {
				if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
			}
			return copy;
		}
	}

	// 关闭下拉框
	this.closeDropDown = function () {
		dropdown.close();
	}

	// 获取缓存
	this.getCache = function () {
		return clone(present.cache);
	}

	//设置缓存数据
	this.setCache = function (data) {
		present.loadFromCache(data);
		dropdown.renderUI(data);
	}

	// 获取当前点击后数据
	this.getCurrent = function () {
		return clone(dropdown.current);
	}

	// 设置数据
	this.setData = function (target) {
		present.cache = target.getCache();
		dropdown.current = target.getCurrent();
	}

	// *** 从另一个牙位图复制所有数据 ******
	this.copyFrom = function (source, afterCopy) {

		this.element.innerHTML = source.element.innerHTML;

		var tm = new toothMap(this.selector, {
			current: source.getCurrent()
		});

		tm.closeDropDown();
		tm.setData(source);

		if (afterCopy) {
			afterCopy(tm);
		}
	}

	// 牙位图管理器，用于多个牙位图之间同步数据
	if (!window.toothMapManager) {
		window.toothMapManager = {
			// 注册牙位图对象
			regist: function (toothMap) {
				if (!this.toothMapCache) {
					this.toothMapCache = {};
				}

				this.toothMapCache[toothMap.selector] = toothMap;

				//垃圾回收
				var cache = {};
				for (var i in this.toothMapCache) {
					if (document.querySelector(i)) {
						cache[i] = this.toothMapCache[i];
					}
				}

				this.toothMapCache = cache;
			},
			//根据选择器获取牙位图对象
			get: function (selector) {
				var tmc = this.toothMapCache;
				if (tmc) {
					return tmc[selector];
				}
				return null;
			},
			// 关闭除当前调用者外所有弹框
			closeDropDown: function () {
				var cache = window.toothMapManager.toothMapCache,
					caller = this;
				if (cache) {
					for (var i in cache) {
						if (caller.selector == i) continue;
						cache[i].closeDropDown();
					}
				}
			},
			// 同步牙位图数据
			syncData: function () {
				var cache = window.toothMapManager.toothMapCache,
					syncor = this;
				if (cache) {
					for (var i in cache) {
						if (syncor.selector == i) continue;

						var item = cache[i];

						if (item) {
							item.copyFrom(syncor);
						}
					}
				}
			}
		}
	}

	window.toothMapManager.regist(this);

	//重置
	this.reset = function () {
		var btnReset = this.element.querySelector("button[data-action='reset']");
		if (btnReset) {
			var e = document.createEvent("MouseEvents");
			e.initEvent("click", true, true);
			btnReset.dispatchEvent(e);
			this.closeDropDown();
		}
	}

	/**
	 * 获取牙位图模板
	 * @returns 
	 */
	this.getTemplate = function(){
		return toothMapTemplate;
	}

	//牙位图模板
	var toothMapTemplate =
		'<div class="sc-toothMap" data-type="component-toothMap">' +
		'<div class="toothMapPresent">' +
		'<table>' +
		'<tr>' +
		'<td class="toothMapTableTopLeft"></td>' +
		'<td class="toothMapTableTopRight"></td>' +
		'</tr>' +
		'<tr>' +
		'<td class="toothMapTableBottomLeft"></td>' +
		'<td class="toothMapTableBottomRight"></td>' +
		'</tr>' +
		'</table>' +
		'</div>' +
		'<div class="toothMapDropDown">' +
		'<div class="toothMapDropDownHead">' +
		'<div class="toothMapDropDownButtons">' +
		'<button type="button" class="toothMapButton" style="margin-right:10px;" data-action="reset">重置</button>' +
		'<label class="toothMapLabel">恒牙：</label>' +
		'<button type="button" class="toothMapButton" data-action="h-full">全口</button>' +
		'<button type="button" class="toothMapButton" data-action="h-up">上半口</button>' +
		'<button type="button" class="toothMapButton" data-action="h-down">下半口</button>' +
		'<label class="toothMapLabel">乳牙：</label>' +
		'<button type="button" class="toothMapButton" data-action="r-full">全口</button>' +
		'<button type="button" class="toothMapButton" data-action="r-up">上半口</button>' +
		'<button type="button" class="toothMapButton" data-action="r-down">下半口</button>' +
		'</div>' +
		'<div class="toothMapDropDownClose"><a>×</a></div>' +
		'</div>' +
		'<div class="toothMapDropDownBody">' +
		'<div class="toothMapLeft">' +
		'<div class="toothMapTopLeft borderDeep">' +
		'<div class="toothMapRow pad">' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="E" data-type="r-up">E</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="D" data-type="r-up">D</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="C" data-type="r-up">C</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="B" data-type="r-up">B</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="A" data-type="r-up">A</button>' +
		'</div>' +
		'<div class="toothMapRow">' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="8" data-type="h-up">8</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="7" data-type="h-up">7</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="6" data-type="h-up">6</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="5" data-type="h-up">5</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="4" data-type="h-up">4</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="3" data-type="h-up">3</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="2" data-type="h-up">2</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topLeft" data-val="1" data-type="h-up">1</button>' +
		'</div>' +
		'<div class="toothMapFlg right">右</div>' +
		'</div>' +
		'<div class="toothMapTopRight borderDeep">' +
		'<div class="toothMapRow pad">' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="A" data-type="r-up">A</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="B" data-type="r-up">B</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="C" data-type="r-up">C</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="D" data-type="r-up">D</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="E" data-type="r-up">E</button>' +
		'</div>' +
		'<div class="toothMapRow">' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="1" data-type="h-up">1</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="2" data-type="h-up">2</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="3" data-type="h-up">3</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="4" data-type="h-up">4</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="5" data-type="h-up">5</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="6" data-type="h-up">6</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="7" data-type="h-up">7</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="topRight" data-val="8" data-type="h-up">8</button>' +
		'</div>' +
		'<div class="toothMapFlg left">左</div>' +
		'</div>' +
		'<div class="toothMapBottomLeft borderDeep">' +
		'<div class="toothMapRow pad">' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="8" data-type="h-down">8</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="7" data-type="h-down">7</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="6" data-type="h-down">6</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="5" data-type="h-down">5</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="4" data-type="h-down">4</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="3" data-type="h-down">3</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="2" data-type="h-down">2</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="1" data-type="h-down">1</button>' +
		'</div>' +
		'<div class="toothMapRow">' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="E" data-type="r-down">E</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="D" data-type="r-down">D</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="C" data-type="r-down">C</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="B" data-type="r-down">B</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomLeft" data-val="A" data-type="r-down">A</button>' +
		'</div>' +
		'</div>' +
		'<div class="toothMapBottomRight">' +
		'<div class="toothMapRow pad">' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="1" data-type="h-down">1</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="2" data-type="h-down">2</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="3" data-type="h-down">3</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="4" data-type="h-down">4</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="5" data-type="h-down">5</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="6" data-type="h-down">6</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="7" data-type="h-down">7</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="8" data-type="h-down">8</button>' +
		'</div>' +
		'<div class="toothMapRow">' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="A" data-type="r-down">A</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="B" data-type="r-down">B</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="C" data-type="r-down">C</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="D" data-type="r-down">D</button>' +
		'<button type="button" class="toothMapButton fix" data-pos="bottomRight" data-val="E" data-type="r-down">E</button>' +
		'</div>' +
		'</div>' +
		'</div>' +
		'<div class="toothMapRight">' +
		'<div class="toothMapPos">' +
		'<div class="toothMapPosHead">' +
		'暂未选择牙位' +
		'</div>' +
		'<div class="toothMapPosBody">' +
		'<div class="toothMapRow pad center">' +
		'<button type="button" class="toothMapButton fix" data-tooth-pos="La" title="唇面">La</button>' +
		'<button type="button" class="toothMapButton fix" data-tooth-pos="B" title="颊面">B</button>' +
		'<button type="button" class="toothMapButton fix" data-tooth-pos="F" title="唇面颊面">F</button>' +
		'</div>' +
		'<div class="toothMapRow pad center">' +
		'<button type="button" class="toothMapButton fix" data-tooth-pos="M" title="近中面">M</button>' +
		'<button type="button" class="toothMapButton fix" data-tooth-pos="O/I" title="颌面/切缘">O/I</button>' +
		'<button type="button" class="toothMapButton fix" data-tooth-pos="D" title="远中面">D</button>' +
		'</div>' +
		'<div class="toothMapRow center">' +
		'<button type="button" class="toothMapButton fix" data-tooth-pos="L" title="舌侧">L</button>' +
		'<button type="button" class="toothMapButton fix" data-tooth-pos="P" title="腭侧">P</button>' +
		'</div>' +
		'</div>' +
		'</div>' +
		'</div>' +
		'</div>' +
		'<div class="toothMapDropDownFoot">' +
		'<label style="font-size:14px;font-weight:normal;float:right;margin-right:180px;"><input type="checkbox" name="syncData" style="vertical-align:-1px;"/>&nbsp;同步牙位</label>' +
		'</div>' +
		'</div>' +
		'</div>';
}
